<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>省市区三级联动</title>
</head>

<body>
    <!-- 先搞一个下拉选择菜单
    先把省市区列到下拉选择菜单去
    select和option实现，select包着option，option是选择项
    其实就是枚举citys数组
 -->
    <select name="" id="province">

        <!-- <option value=""></option> 开始老师提到克隆，后来选择凭空捏一个option，所以目前没有写-->
    </select>
    <select name="" id="city"></select>
    <select name="" id="area"></select>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/citys.js"></script>
<script>
    let province = $("#province");
    let city = $("#city");
    let area = $("#area");
    citys.forEach(item => { //这里是省份初始化
        let option = $(`<option>${item.provinceName}</option>`); //凭空捏一个option出来
        province.append(option); //把option插入到province里面
    })
    citys[0].mallCityList.forEach(item => { //这里是城市初始化
        let option = $(`<option>${item.cityName}</option>`); //凭空捏一个option出来
        city.append(option); //把option插入到city里面
    })
    citys[0].mallCityList[0].mallAreaList.forEach(item => { //这里是区域初始化
            let option = $(`<option>${item.areaName}</option>`); //凭空捏一个option出来
            area.append(option); //把option插入到area里面
        })
        // 当省份发生变化时，区也要发生变化，因此也要调用区变化函数
    province.change(function() { //省份改变事件，下拉选择菜单除了独有change事件以外还独有一个selectIndex属性，原生JS有selectIndex属性，但是jquery没有
        // console.log(1);       //测试用
        // console.log(this.selectedIndex); // 会返回当前选中的选择项在其select标签中的下标；为了找到省份对应市
        // console.log(citys[this.selectedIndex].mallCityList);//返回选择省的市
        //updateCity(this); //省份发生变化的时候，我们要更新城市;可以把城市更新函数里边的this当成参数传到此处，这是一种方法:  function updateCity(target) {  console.log(citys[target.selectedIndex].mallCityList);   }

        // console.log(this); //这个this是下拉选择菜单
        updateCity.call(this); //把此处的this指向换到下边函数的this指向了 
        //call和apply的不同点：每一个函数都有call和apply的方法:都是帮助我们调用函数的,但是在调用的时候可以改变本次执行函数中this的指向。他们的不同点就在于call是无限多个参数，而apply有两个参数，第二个参数是数组，代表实参集合。一般来说我们也就是在用JS实现面向对象的继承特点时会使用到这个方法。

        // updateArea.call(this); //不能这样写，数据错乱，这个this不对
        updateArea.call(city[0]); //这里不能直接写city，因为city是jQuery对象，而下边写的this都是原生JS的node节点，因此，要将city转为原生JS节点，这个要去第一次学jQuery学，

    })
    city.change(function() { //市变的时候，更新区
        updateArea.call(this);
    })

    function updateCity() { //省份发生变化的时候，我们要更新城市，希望把更新城市写在函数里
        // console.log(this); //此处this指向的是window
        // console.log(citys[this.selectedIndex].mallCityList); //返回选择省的市；这里的this指向的市window
        city.html(""); //每次点击，让已经选择过de城市清空
        // let cityList = citys[this.selectedIndex].mallCityList;
        cityList = citys[this.selectedIndex].mallCityList; //找省份下边的时；将cityList变为全局变量方便下边使用
        cityList.forEach(item => {
            let option = $(`<option>${item.cityName}</option>`); //凭空捏一个option出来
            city.append(option); //把option插入到city里面
        })
    }

    function updateArea() {
        // console.log(this); //此处this指向的是window
        // console.log(citys[this.selectedIndex]); //在没有将cityList变为全局变量之前，返回选择省的市；这里的this指向的是window，此处点击市，会导致数据混乱，
        area.html(""); //每次点击，让已经选择过de区域清空
        let areaList = cityList[this.selectedIndex].mallAreaList; //找城市下边的区
        areaList.forEach(item => {
            let option = $(`<option>${item.areaName}</option>`); //凭空捏一个option出来
            area.append(option); //把option插入到city里面
        })
    }
</script>

</html>